<template>
	<view class="container">
		<navbar :title="handleType == 1 ? '新增收货地址':'编辑收货地址'"></navbar>
		<view v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="address-wrap" v-else>
			<view class="address-item line-v-center">
				<label>收货人<text>*</text></label>
				<view class="address-item-input line-v-center">
					<input type='text' v-model.trim='form.name' placeholder="收件人姓名" placeholder-class="pl" @input="getValue"
						data-k='0' />
				</view>
			</view>
			<view class="address-item line-v-center">
				<label>手机号<text>*</text></label>
				<view class="address-item-input line-v-center">
					<view>+86</view>
					<view class="line"></view>
					<input type='text' v-model.trim='form.phone' placeholder="收件人电话" placeholder-class="pl" @input="getValue"
						data-k='1' />
				</view>
			</view>
			<view class="address-item line-v-center">
				<label>所在地区<text>*</text></label>
				<view class="address-item-input line-v-center">
					<select-region :defaultValue="defaultValue" @change='getSelectRegionData'></select-region>
				</view>
			</view>
			<view class="address-item line-v-center">
				<label>详细地址<text>*</text></label>
				<view class="address-item-textarea line-v-center">
					<textarea placeholder="小区/写字楼/学校" v-model.trim='form.detail' placeholder-class="pl" @input="getValue"
						data-k='2'></textarea>
					<!-- <input type='text' placeholder="小区/写字楼/学校" placeholder-class="pl" @input="getValue" data-k='2'/> -->
				</view>
			</view>
		</view>
		<view class="footer-wrap">
			<button class="footer line-center" @tap='submitForm' :disabled="isDisabled" :loading="isLoading">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import selectRegion from "@/components/select-region/select-region.vue"
	export default {
		components: {
			selectRegion,
		},
		data() {
			return {	
				loadingPage:false,
				handleType: 1,
				form: {
					name: '',
					phone: '',
					detail: '',
					address_id: '',
					province_id:'',
					city_id:'',
					region_id:''
				},
				defaultArea: {
					area_id: '',
					area_name: ""
				},
				isDisabled:false,
				isLoading:false,
				defaultValue:[]
			};
		},
		onLoad(option) {
			this.handleType = option.type ? option.type : 1;
			if(this.handleType == 2){
				this.loadingPage = true
				this.form.address_id = option.id;
				this.getDetail()
			}
			this.getDefaultArea();
		},
		methods: {
			//获取区域
			getSelectRegionData(obj){
				this.form.province_id = obj.province_id;
				this.form.city_id = obj.city_id;
				this.form.region_id = obj.region_id;
			},
			getDetail(){
				const that = this;
				app.globalRequest({
					api: app.getApi().user.detailAddr,
					data:{
						address_id:that.form.address_id
					}
				}).then(res => {
					that.loadingPage = false
					if (res.code == 0) {
						that.form.name = res.data.name;
						that.form.phone = res.data.phone;
						that.form.detail = res.data.detail;
						that.form.province_id = res.data.province_id;
						that.form.city_id = res.data.city_id;
						that.form.region_id = res.data.region_id;
						that.defaultValue = [res.data.province_id,res.data.city_id,res.data.region_id];
					}
				}).catch(err => {
				
				})
			},
			getDefaultArea() {
				const that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					if (res.code == 0) {
						that.defaultArea.area_id = res.data.area_id;
						that.defaultArea.area_name = res.data.area_name;
					}
				}).catch(err => {

				})
			},
			getValue(e) {
				let that = this,
					form = that.form,
					{
						k,
						type
					} = e.currentTarget.dataset,
					v = that.$trim(e.detail.value);
				switch (Number(k)) {
					case 0:
						form.name = v;
						break;
					case 1:
						form.phone = v;
						break;
					case 2:
						form.detail = v;
						break;
				}
				that.form = form;
			},
			submitForm() {
				console.log('that.form',this.form)
				const that = this;
				if (!that.form.name) {
					uni.showToast({
						title: '请输入收货人姓名',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (!that.form.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(that.form.phone))) {
					uni.showToast({
						title: "手机号码不合法，请重新输入",
						icon: 'none',
						mask: true
					});
					return;
				}
				if(!that.form.province_id || !that.form.city_id || !that.form.region_id){
					uni.showToast({
						title: "请选择省市区",
						icon: 'none',
						mask: true
					});
					return;
				}
				if (!that.form.detail) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
						mask: true
					})
					return;
				}
				that.isDisabled = true;
				that.isLoading = true;
				that.btnText = '提交中...';
				app.globalRequest({
					api: app.getApi().user.saveAddress,
					method: 'POST',
					data: this.form,
				}).then(res => {
					if (res.code == 0) {
						that.isDisabled = false;
						that.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'success',
							mask: true
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						that.isDisabled = false;
						that.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				}).catch(err => {

				})
			},

		}

	}
</script>

<style lang="scss" scoped>
	.address-wrap {
		margin: 0 24rpx;
		background: #fff;
		padding: 24rpx;
		border-radius: 0 0 16rpx 16rpx;
	}

	.pl {
		font-size: 28rpx;
		color: #9B9B9B;
	}

	.address-item {
		margin-bottom: 24rpx;

		label {
			width: 160rpx;

			text {
				color: #FF3838;
			}
		}

		.address-item-textarea {
			width: 508rpx;
			height: 140rpx;
			background: #F9F9F9;
			border-radius: 8rpx;
			padding: 24rpx;
			box-sizing: border-box;

			textarea {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
			}
		}

		.address-item-input {
			width: 508rpx;
			height: 84rpx;
			background: #F9F9F9;
			border-radius: 8rpx;
			padding: 0 24rpx;
			box-sizing: border-box;

			input {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
			}

			.line {
				margin: 0 24rpx;
				width: 2rpx;
				height: 28rpx;
				background: #333;
			}
		}
	}

	.footer-wrap {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: $supplier-page-color;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.footer {
			width: 660rpx;
			height: 80rpx;
			background: $supplier-btn-linear-color;
			border-radius: 104rpx 104rpx 104rpx 104rpx;
			color: #fff;
		}
	}
</style>